<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view style="margin-top: 30px;"></view>
		<!-- #endif -->
		
		<!-- 搜索栏区域 -->
		<search-item @showDrawer="showDrawer('showLeft')"></search-item>
		<!-- 侧拉栏区域 -->
		<view class="drawer">
			<!-- 侧拉栏内容 -->
			<uni-drawer mask ref="showLeft" mode="left" :width="250" @change="change($event,'showLeft')">
				<drawer-content-item @closeDrawer="closeDrawer('showLeft')" @scan='scan()'></drawer-content-item>
			</uni-drawer>
		</view>
		<!-- 个人主页 -->
		<view class="me">
			<!-- 未登录状态 -->
			<view class="visitor" v-show="isLogin" @click="goLogin">
				<image class="avatar" src="../../static/icons/visitor.png" mode=""></image>
				<view class="name"><view class="b">点击登录</view></view>
			</view>
			<!-- 登录状态 -->
			<view class="user" v-show="!isLogin">
				<image class="avatar" :src="userInfo.avatar_url" mode="aspectFill"></image>
				<view class="name">
					<view class="b">{{ userInfo.name}}</view>
					<view class="s">账户名：{{ userInfo.user_name }}</view>
				</view>
				<view class="logout" @click="bindLogout"><image src="../../static/icons/logout.png" mode="aspectFill"></image></view>
			</view>
			<view class="nav">
				<view class="nav_item" @click="goHistory()">
					<image src="../../static/icons/time-red.png"></image>
					<view>历史记录</view>
				</view>
				<view class="line"></view>
				<view class="nav_item" @click="goList(userInfo.id)">
					<image src="../../static/icons/favorite.png"></image>
					<view>我的收藏</view>
				</view>
			</view>
			<view class="border"></view>
			<!-- 列表区域 -->
			<view class="bar">发帖</view>
			<view class="err" v-show="isLogin">请先登录</view>
			<view class="list" v-for="item in list" :key="item.id" @click="goArticle(item.id)">
				<view class="list-item">
					<view class="text">
						<view class="u_text">{{ item.title }}</view>
						<view class="l_text">{{ item.time }}</view>
					</view>
					<view class="img"><image :src="item.img_url"></image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	export default {
		data() {
			return {
				flag: false,
				reFresh: '',
				list:[]
			}
		},
		watch: {
			reFresh: function() {
				this.getArticle()
			}
		},
		onShow() {
			this.getArticle()
		},
		onLoad() {
			this.getArticle()
		},
		computed: mapState(['isLogin','userInfo']),
		methods: {
			...mapMutations(['logout']),
			bindLogout() {
				uni.showToast({
					icon: 'loading',
					title: '正在退出',
					duration: 1000
				})
				setTimeout(() => {
					this.logout()
					this.getArticle()
					setTimeout(() => {
						uni.showToast({
							icon: 'none',
							title: '已退出登录',
						})
					},500)
				},1000)
			},
			getArticle() {
				uni.request({
					url: 'http://www.yingke.com/Index/userInfo?uid='+ this.userInfo.id,
					method: 'POST',
					success: (res) => {
						this.list = res.data.data.article
					}
				})
			},
			goHistory() {
				if(!this.isLogin)
					uni.navigateTo({
						url: '../history/history'
					})
				else{
					uni.showToast({
						title: '当前未登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '../login/login'
						})
					},1000)
				}
			},
			goList(uid) {
				if(!this.isLogin)
					uni.navigateTo({
						url: '../mov-list/mov-list?uid='+uid
					})
				else{
					uni.showToast({
						title: '当前未登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '../login/login'
						})
					},1000)
				}
			},
			goArticle(id) {
				// console.log(this.userInfo)
				uni.navigateTo({
					url: '../com-detail/com-detail?id='+id+'&userInfo='+JSON.stringify(this.userInfo)
				})
			},
			goLogin() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			// 打开窗口
			showDrawer(e) {
				// console.log('打开抽屉')
				this.$refs[e].open();
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close();
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				// console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
		}
	}
</script>

<style lang="scss">
	.drawer{
		.close {
			padding: 10px;
		}
	}
	.me{
		.visitor{
			display: flex;
			margin: 10px 10px;
			padding-bottom: 10px;
			line-height: 40px;
			.avatar{
				width: 60px;
				height: 60px;
				border-radius: 50px;
			}
			.name{
				margin-top: 5px;
				margin-left: 10px;
				.dec{
					display: flex;
					margin-top: 8px;
					view{
						margin-right: 10px;
					}
				}
			}
		}
		.user{
			display: flex;
			margin: 10px 10px;
			padding-bottom: 10px;
			.avatar{
				width: 60px;
				height: 60px;
				border-radius: 50px;
			}
			.name{
				margin-top: 5px;
				margin-left: 10px;
				.dec{
					display: flex;
					view{
						margin-right: 10px;
					}
				}
			}
			.logout{
				display: inline-block;
				position: absolute;
				right: 10px;
				top: 80px;
				// #ifdef APP-PLUS
				top: 110px;
				// #endif
				text-align: center;
				image{
					width: 20px;
					height: 20px;
				}
			}
		}
		.line{
			width: 2px;
			background: #eaeaea;
		}
		.border{
			border-bottom: 2px solid #eaeaea;
		}
		.nav{
			display: flex;
			border-radius: 20rpx;
			margin: 10px 5px;
			background: #fff;
				border: solid 1px #eaeaea;
				border-radius: 20rpx;
			.nav_item{
				width: 50%;
				text-align: center;
				font-size: 13px;
				padding-top: 5px;
				image{
					width: 30px;
					height: 30px;
				}
			}
		}
		.bar{
			width: 355px;
			height: 40px;
			margin-top: 10px;
			margin-right: 10px;
			margin-left: 10px;
			border-radius: 5px;
			font-size: 20px;
			font-weight: bold;
		}
		.err{
			text-align: center;
			font-size: 18px;
		}
		.list{
			width: 750rpx;
			height: 200rpx;
			display: flex;
			padding-bottom: 10px;
			.list-item{
				width: 100%;
				background: #fcfcfc;
				border: 1px solid #eaeaea;
				.text{
					width: 480rpx;
					float: left;
					.u_text{
						margin: 10px 5px 10px;
					}
					.l_text{
						margin-left: 5px;
					}
				}
				.img{
					width: 120rpx;
					display: inline-block;
					margin: 5px 5px;
					image{
						width: 120px;
						height: 80px;
						border-radius: 5px;
					}
				}
			}
			
		}
		.review{
			margin-left: 10px;
			margin-right: 10px;
			padding-bottom: 10px;
			border-bottom: 1px solid #eaeaea;
			.review-user{
				margin-top: 15px;
				image{
					width: 40px;
					height: 40px;
					border-radius: 50px;
					box-shadow: 5px 5px 10px #eaeaea;
				}
				.r-tit{
					margin-left: 10px;
					display: inline-block;
					.r-tit-s{
						font-size: 13px;
						color: #C0C0C0;
					}
				}
				.more{
					position: absolute;
					right: 10px;
					margin-top: 25px;
				}
			}
			.r-review{
				margin-top: 10px;
				.r-bar{
					width: 100%;
					height: 70px;
					margin-top: 5px;
					margin-right: 10px;
					background: #fcfcfc;
					border: 1px solid #eaeaea;
					display: flex;
					image{
						width: 90px;
						height: 60px;
					}
					.r-tit{
						margin: 10px 10px;
						
					}
				}
			}
		}
	}
</style>
